import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueDevTools from 'vite-plugin-vue-devtools';
import path from 'path';
import autoprefixer from 'autoprefixer';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
    // element-plus自动导入推荐配置
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
    // svg图标自动导入推荐配置
    createSvgIconsPlugin({
      iconDirs: [path.resolve(__dirname, 'src/assets/icons')], // SVG 存放目录
      symbolId: 'icon-[name]', // 图标 ID 格式
    }),
  ],
  css: {
    postcss: {
      plugins: [
        autoprefixer, // 添加 autoprefixer 插件(浏览器厂商前缀)
      ],
    },
    preprocessorOptions: {
      scss: {
        //编译所有应用 scss 变量的组件
        additionalData: `@use "@/assets/styles/theme.scss" as *;`,
      },
    },
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      components: path.resolve(__dirname, './src/components'),
      views: path.resolve(__dirname, './src/views'),
      baseCom: path.resolve(__dirname, './src/base-components'),
      utils: path.resolve(__dirname, './src/libs/utils'),
      styles: path.resolve(__dirname, './src/styles'),
      images: path.resolve(__dirname, './src/images'),
      types: path.resolve(__dirname, './src/types'),
    },
    extensions: ['.ts', '.js', '.mjs', '.vue', '.json', '.less', '.css'],
  },
});
